import './VideoTemp.scss'
import { useRef, useEffect } from 'react'

// 背景视频
export const VideoTempA01 = ({ url, seekTimeStart = 0, seekTimeEnd = 10 }) => {
    const myRef = useRef(null)
    const easyPro = useRef(null)

    const data = {
        isLive: false,
        bufferTime: 0.2,
        loadTimeReplay: 3,
        loadTimeOut: 10,
        MSE: true,
        hasAudio: false,
        stretch: false,
        poster: '',
    }

    useEffect(() => {
        if (url) {
            if (easyPro.current) {
                easyPro.current.destroy().then(() => {
                    create()
                })
            } else {
                create()
            }
        }
    }, [url])

    const create = () => {
        easyPro.current = new window.EasyPlayerPro(myRef.current, data)
        play()
    }
    // 播放视频
    const play = () => {
        if (!easyPro.current) return create()
        easyPro.current
            .play(url)
            .then(() => {
                console.log('[-----------player started-----------]')
                // destroy()
            })
            .catch(e => {
                console.error('[``````````player error``````````````]', e)
                destroy()
            })
    }
    const destroy = () => {
        if (!easyPro.current) return create()
        easyPro.current
            .destroy(url)
            .then(() => {
                console.log('player destroy')
            })
            .catch(e => {
                console.error('destroy - error', e)
            })
    }

    const seekTime = time => {
        easyPro.current.seekTime(time)
    }
    useEffect(() => {
        if (easyPro.current) {
            easyPro.current.on('timestamps', function (e) {
                if (seekTimeEnd && seekTimeEnd === e) seekTime(seekTimeStart)
            })
        }
    }, [easyPro])

    return (
        <div className='VideoTempA01' ref={myRef} />
    )
}


// 附件视频 
export const VideoTempA02 = ({ url }) => {
    const myRef = useRef(null)
    const easyPro = useRef(null)

    const data = {
        isLive: false,
        bufferTime: 0.2,
        loadTimeReplay: 3,
        loadTimeOut: 10,
        MSE: true,
        hasAudio: false,
        stretch: false,
        poster: '',
    }

    useEffect(() => {
        if (url) {
            if (easyPro.current) {
                easyPro.current.destroy().then(() => {
                    create()
                })
            } else {
                create()
            }
        }
    }, [url])

    const create = () => {
        easyPro.current = new window.EasyPlayerPro(myRef.current, data)
        play()
    }
    // 播放视频
    const play = () => {
        if (!easyPro.current) return create()
        easyPro.current
            .play(url)
            .then(() => {
                console.log('[-----------player started-----------]')
                // destroy()
            })
            .catch(e => {
                console.error('[``````````player error``````````````]', e)
                destroy()
            })
    }
    const destroy = () => {
        if (!easyPro.current) return create()
        easyPro.current
            .destroy(url)
            .then(() => {
                console.log('player destroy')
            })
            .catch(e => {
                console.error('destroy - error', e)
            })
    }

    return (
        <div ref={myRef} />
    )
}

// 监控视频
export const VideoTempA03 = ({ url }) => {
    const myRef = useRef(null)
    const easyPro = useRef(null)

    const data = {
        isLive: true,
        bufferTime: 0.2,
        loadTimeReplay: 2,
        loadTimeOut: 10,
        MSE: true,
        hasAudio: false,
        stretch: false,
        poster: '',
    }

    useEffect(() => {
        if (url) {
            if (easyPro.current) {
                easyPro.current.destroy().then(() => {
                    create()
                })
            } else {
                create()
            }
        }
    }, [url])

    const create = () => {
        easyPro.current = new window.EasyPlayerPro(myRef.current, data)
        play()
    }
    // 播放视频
    const play = () => {
        if (!easyPro.current) return create()
        easyPro.current
            .play(url)
            .then(() => {
                console.log('[-----------player started-----------]')
                // destroy()
            })
            .catch(e => {
                console.error('[``````````player error``````````````]', e)
                destroy()
            })
    }
    const destroy = () => {
        if (!easyPro.current) return create()
        easyPro.current
            .destroy(url)
            .then(() => {
                console.log('player destroy')
            })
            .catch(e => {
                console.error('destroy - error', e)
            })
    }

    return (
        <div ref={myRef} />
    )
}
